import { Card, Form, Input, Button, Checkbox } from "antd"
import './Login.scss'
import logo from '@/assets/logo.png'
export const Login = () => {
  const onFinish = (values) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <div className='login'>
      <Card className='geek-card' bordered={true} bodyStyle={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center'

      }}>
        <img className='login-logo' src={logo} />
        <Form
          initialValues={{
            mobile: "13911111111",
            code: '246810',
            remember: true,
          }}
          validateTrigger="onBlur"
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            name="mobile"
            rules={[
              {
                required: true,
                message: '请输入手机号',
              },
              {
                pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
                message: '手机号格数不对',
              },
            ]}
          >
            <Input size='large' placeholder='请输入手机号' maxLength={11} />
          </Form.Item>

          <Form.Item
            name="code"
            rules={[
              {
                required: true,
                message: '请输入验证码',
              },
              {
                len: 6,
                message: '验证码格数不对',
              },
              {
                pattern: /^\d{6,}$/,
                message: '验证码必须是6位数字',
              },
            ]}
          >
            <Input size='large' placeholder='请输入验证码' maxLength={6} />
          </Form.Item>

          <Form.Item
            name="remember"
            valuePropName="checked"
          >
            <Checkbox>我已阅读并同意</Checkbox>
          </Form.Item>

          <Form.Item>
            <Button size='large' type="primary" htmlType="submit" style={{ width: '100%' }}>
              登 录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div >
  )
}
